<template>
  <ve-card :title="'期数：' + record.receivableNum + '期'" :type="record.receivableStatus == 20 ? 'blue' : 'yellow'" fold>
    <template #title>
      <view class="status-tag" :class="['status-tag_' + record.receivableStatus]">{{ record.receivableStatusName }}</view>
    </template>
    <!-- 10:待收款 20:已收款 -->
    <ve-cell-val label="应付款日" :value="record.receivableTime" />
    <ve-cell-price label="每期应付金额" :value="record.receivableAmount" />
    <ve-cell-price label="每期实付金额" :value="record.receivedAmount" />
    <ve-cell-val label="完成付款时间" :value="record.receivedTime" />
    <ve-cell-val label="备注" :value="record.orderRemark" />
  </ve-card>
</template>

<script setup lang="ts">
  defineProps({
    record: {
      type: Object,
      default: () => {},
    },
  })
</script>

<style lang="less" scoped>
  .status-tag {
    margin-left: 16rpx;
    width: 104rpx;
    height: 40rpx;
    background: #3491fa;
    border-radius: 200rpx;
    // 字
    text-align: center;
    font-size: 24rpx;
    font-weight: 500;
    color: #ffffff;
    line-height: 40rpx;
    &_10 {
      background: #ff7d00;
    }
  }
</style>
